<!--
 * @Author: Bennty
 * @Date: 2024-08-27 13:53:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-05 10:36:36
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="录入包装件信息" width="40%" @close="handleClose" destroy-on-close >
        <el-form :model="formData" ref="formRef">
            <el-form-item label="包装件名称">
                {{ `${props.data.productCategoriesName}-${props.data.productSubcategoryName}-${props.data.specsDetail}` }}
            </el-form-item>
            <el-form-item label="包装袋">
                <el-row :gutter="15">
                    <!-- <el-col :span="8">
                        <el-select v-model="formData.packingCategoriesType" disabled>
                            <el-option v-for="item in props.types" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-col> -->
                    <el-col :span="8">
                        <el-select v-model="formData.packingSubcategoryType" filterable>
                            <el-option v-for="item in packingBag" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="16">
                        <el-select v-model="formData.packingJoinId" filterable>
                            <el-option v-for="item in packingBagList" :key="item.id" :label="item.specsDetail" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item v-for="(item,index) in formData.packingList" :key="index" :label="`包装物${index + 1}`">
                <el-row :gutter="5">
                    <el-col :span="5">
                        <el-select v-model="item.productCategoriesType" filterable placeholder="请选择">
                            <el-option v-for="item in props.types" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        <el-select v-model="item.productSubcategoryType" filterable placeholder="请选择">
                            <el-option v-for="value in preparedData[index]?.subClassTypes" :key="value.id" :label="value.subclassName" :value="value.subclassType" ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="5">
                        <el-select v-model="item.joinAuxiliaryId" filterable placeholder="请选择">
                            <el-option v-for="auxiliary in preparedData[index]?.auxiliaries" :key="auxiliary.id" :label="auxiliary.specsDetail" :value="auxiliary.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-input type="number" v-model.number="item.innerNumber" placeholder="内包数"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-input type="number" v-model.number="item.number" placeholder="产品数"></el-input>
                    </el-col>
                    <el-col :span="1">
                        <span>个</span>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';
import { getAuxiliaryByTypeApi,addPackageApi } from '@/api/sj/warehouse/auxiliary'; 

const props = defineProps(['visible', 'types', 'bagCatagory','data']);
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    auxiliaryId: undefined,
    packingCategoriesType: props.bagCatagory,
    packingSubcategoryType: undefined,
    packingJoinId: undefined,
    packingList:[
        {
            productCategoriesType: undefined,
            productSubcategoryType: undefined,
            joinAuxiliaryId: undefined,
            innerNumber: undefined,
            number: undefined
        },
        {
            productCategoriesType: undefined,
            productSubcategoryType: undefined,
            joinAuxiliaryId: undefined,
            innerNumber: undefined,
            number: undefined
        },
        {
            productCategoriesType: undefined,
            productSubcategoryType: undefined,
            joinAuxiliaryId: undefined,
            innerNumber: undefined,
            number: undefined
        },
        {
            productCategoriesType: undefined,
            productSubcategoryType: undefined,
            joinAuxiliaryId: undefined,
            innerNumber: undefined,
            number: undefined
        }
    ]
});
const packingBag = ref<any[]>([]);
const packingBagList = ref<any[]>([]);
const preparedData = ref<any[]>([]);

const getSingleType = async (majorType: any) => {
    const { data } = await getSingleByTotalApi(majorType);
    return data;
};

const getAuxiliaryByType = async (major: any, sub: any) => {
    const { data } = await getAuxiliaryByTypeApi(major, sub);
    return data;
};

/** 拿到包装袋小类 */
watch(()=>[props.visible, props.bagCatagory], ([newVisible, newBagCatagory])=>{
    if(newBagCatagory.majorType && newVisible){
        formData.value.packingCategoriesType = newBagCatagory.majorType;
        getSingleType(newBagCatagory.majorType).then((result)=>{
            packingBag.value = result;
        });
    };
});

/** 根据包装袋小类，获取相应辅材 */
watch(()=>formData.value.packingSubcategoryType,(newData)=>{
    if(newData){
        getAuxiliaryByType(props.bagCatagory.majorType,newData).then((result)=>{
            packingBagList.value = result;
        });
    };
});

/** 小类改变，清空包装袋 */
watch(()=>formData.value.packingSubcategoryType,(newValue, oldValue)=>{
    if(newValue !== oldValue){
        formData.value.packingJoinId = undefined;
    };
},{deep: true});


const prepared = formData.value.packingList.map((item:any)=>{
    return {
        subClassTypes: undefined,
        auxiliaries: undefined
    }
});
preparedData.value = prepared;

/** 监控选择的包装袋的材料大类，来获取材料小类 */
watch(()=>formData.value.packingList.map(item => item.productCategoriesType),(newValues: any, oldValues)=>{
    newValues.forEach((newValue:any, index: number) => {
        if (newValue !== oldValues[index] && newValue) {
            preparedData.value[index].subClassTypes = undefined;
            formData.value.packingList[index].productSubcategoryType = undefined;
            formData.value.packingList[index].joinAuxiliaryId = undefined;
            getSingleType(newValue).then((result)=>{
                preparedData.value[index].subClassTypes = result;
            });
        }
    });
},{deep: true});

/** 监控选择的包装袋的材料小类，来获取辅材 */
watch(()=>formData.value.packingList.map(item => item.productSubcategoryType),(newValues: any, oldValues)=>{
    newValues.forEach((newValue:any, index: number) => {
        if (newValue !== oldValues[index] && newValue) {
            formData.value.packingList[index].joinAuxiliaryId = undefined;
            getAuxiliaryByType(formData.value.packingList[index].productCategoriesType, newValue).then((result)=>{
                preparedData.value[index].auxiliaries = result;
            });
        }
    });
},{deep: true});

const handleSubmit = async () => {
    const submitData = {
        ...formData.value,
        auxiliaryId: props.data.id
    };
    const { code } = await addPackageApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    }
    // console.log(formData.value);
};


const handleClose = ()=>{
    emits('close');
    formData.value = {
        auxiliaryId: undefined,
        packingCategoriesType: props.bagCatagory,
        packingSubcategoryType: undefined,
        packingJoinId: undefined,
        packingList:[
            {
                productCategoriesType: undefined,
                productSubcategoryType: undefined,
                joinAuxiliaryId: undefined,
                innerNumber: undefined,
                number: undefined
            },
            {
                productCategoriesType: undefined,
                productSubcategoryType: undefined,
                joinAuxiliaryId: undefined,
                innerNumber: undefined,
                number: undefined
            },
            {
                productCategoriesType: undefined,
                productSubcategoryType: undefined,
                joinAuxiliaryId: undefined,
                innerNumber: undefined,
                number: undefined
            },
            {
                productCategoriesType: undefined,
                productSubcategoryType: undefined,
                joinAuxiliaryId: undefined,
                innerNumber: undefined,
                number: undefined
            }
        ]
    };
    const prepared = formData.value.packingList.map((item:any)=>{
    return {
            subClassTypes: undefined,
            auxiliaries: undefined
        }
    });
    preparedData.value = prepared;
};
</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>